<template>
  <div id="rules_manage" class="container">
    <div class="content">
      <div class="title">约课规则设置</div>
      <div class="panel">
        <div class="condition" style="margin-top:0.6rem;height:6rem;">
          约课成功后,连续旷课
          <el-input
            ref="leaveTime"
            style="width:10%"
            maxlength="9"
            :disabled="!isEdit"
            onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="rulesData.leaveTime"
            placeholder="请输入"
          ></el-input>&nbsp;次,暂时停
          <el-input
            size="small"
            style="width:10%;"
            ref="lockTimeLength"
            :disabled="!isEdit"
            v-model="rulesData.lockTimeLength"
            placeholder="请输入"
            onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="9"
          ></el-input>
          <el-select
            ref="lockTimeUnit"
            v-model="rulesData.lockTimeUnit"
            :disabled="!isEdit"
            type="number"
            style="width:7%; "
          >
            <el-option
              v-for="item in timeModeList"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;约课权限
          <div
            class="btn_user_defined"
            style="margin-left:0.2rem;"
            @click="isEdit = true"
            v-if="!isEdit"
          >设置</div>
          <div
            class="btn_user_defined"
            style="margin-left:0.2rem;"
            @click="isEdit = false"
            v-if="isEdit"
          >取消</div>
          <div
            class="btn_user_defined"
            style="margin-left:0.2rem;"
            @click="editRules"
            v-if="isEdit"
          >确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
export default {
  data() {
    return {
      rulesData: {
        leaveTime: "",
        lockTimeLength: "",
        lockTimeUnit: ""
      },
      isAdd: false,
      isEdit: false,
      timeModeList: [{ name: "周", value: 1 }, { name: "月", value: 2 }]
    };
  },
  components: {},
  methods: {
    editRules() {
      let leaveTime = this.$refs.leaveTime;
      let lockTimeLength = this.$refs.lockTimeLength;
      let lockTimeUnit = this.$refs.lockTimeUnit;
      let rules = [];
      rules.push({
        judge: leaveTime.value,
        focus: leaveTime,
        tips: "请输入旷课次数"
      });
      console.log(leaveTime.value);
      rules.push({
        judge: lockTimeLength.value,
        focus: lockTimeLength,
        tips: "请输入暂停次数"
      });
      rules.push({
        judge: lockTimeUnit.value,
        focus: lockTimeUnit,
        tips: "请输入暂停时间类型"
      });
      if (!tool.validate(rules)) {
        return;
      }
      if (vm.isAdd) {
        vm.rulesData.campusId = this.$store.state.campusId;
        api.classsubscriptionsetAdd(vm.rulesData).then(function(data) {
          if (data.resultCode == 2000) {
            // rulesData = data.list;
            vm.$message({
              message: "设置成功",
              type: "success"
            });
            vm.isEdit = false;
            vm.initData();
          } else {
            vm.$message.error(data.message);
          }
        });
      } else {
        api.classsubscriptionsetUpdate(vm.rulesData).then(function(data) {
          if (data.resultCode == 2000) {
            // rulesData = data.list;
            vm.$message({
              message: "设置成功",
              type: "success"
            });
            vm.isEdit = false;
            vm.initData();
          } else {
            vm.$message.error(data.message);
          }
        });
      }
    },

    initData() {
      let paras = {
        campusId: this.$store.state.campusId
      };
      api.classsubscriptionsetList(paras).then(function(data) {
        if (data.resultCode == 2000) {
          // rulesData = data.list;
          if (data.info == null) {
            vm.isAdd = true;
            vm.rulesData = {
              leaveTime: "",
              lockTimeLength: "",
              lockTimeUnit: ""
            };
          } else {
            vm.isAdd = false;
            vm.rulesData = data.info;
          }
        } else {
          vm.$message.error(data.message);
        }
      });
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    vm.isEdit = false;
    vm.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
#rules_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #ffffff;
    color: #666666;
    border: 0rem solid #ffffff;
    font-size: 0.18rem;
    padding: 0 0.04rem;
  }
  .el-radio {
    margin-right: 0.1rem;
  }
  .el-input__icon {
    line-height: 0.32rem;
  }
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>